<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title=""
               :modal="false"
               class="user-dialog add-or-updata"
               width="50%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div class="detail-box">
        <div>{{ dataForm.announcementSubject }}</div>
        <div v-if="dataForm.updateDate">{{ dataForm.updateDate.substring(0,10).replace(/-/g,'.') }}</div>
        <div>
          <div v-if="dataForm.noticeType === '1'">{{ dataForm.announcementContent }}</div>
          <div v-if="dataForm.noticeType === '2'">
            <img :src="dataForm.announcementContent"
                 alt="">
          </div>
          <div v-if="dataForm.noticeType === '3'">
            <video controls>
              <source :src="dataForm.announcementContent"
                      type="video/mp4">
            </video>
          </div>
          <div v-if="dataForm.noticeType === '4'"
               v-html="dataForm.announcementContent"></div>
        </div>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import tinymce from '@/components/tinymce/tinymce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: 'tb/noticeAnnouncement/add', // 添加或修改接口，API地址
        updateURL: 'tb/noticeAnnouncement/revise', // 添加或修改接口，API地址
        getDataInfoURL: '', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '', // 导出接口，API地址
        publishUrl: ''
      },
      visible: false,
      dataForm: {
      }
    }
  },
  components: { tinymce },
  methods: {
    init (data) {
      let id = ''
      if (data) {
        id = data.id
      }
      this.getDetail(id)
      this.visible = true
    },
    closeDialog () {
      this.$emit('callBack')
      this.visible = false
    },
    getDetail (id) {
      this.$http.get('/tb/noticeAnnouncement/appDetails?id=' + id).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-size: 18px;
}
</style>
